{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我是一个模板</title>
  <link rel="stylesheet" href="{% static 'assets/css/amazeui.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/common.min.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/news.min.css' %}" />
</head>
<body>
  <div class="layout">
    <!--===========layout-header================-->
    <div class="layout-header am-hide-sm-only">
      <!--topbar start-->
      <div class="topbar">
        <div class="container">
          <div class="am-g">
            <div class="am-u-md-3">
              <div class="topbar-left">
                <i class="am-icon-globe"></i>
                <div class="am-dropdown" data-am-dropdown>
                  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>Language <span class="am-icon-caret-down"></span></button>
                  <ul class="am-dropdown-content">
                    <li><a href="#">English</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">中文</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="am-u-md-9">
              <div class="topbar-right am-text-right am-fr">
                Follow us
                <i class="am-icon-facebook"></i>
                <i class="am-icon-twitter"></i>
                <i class="am-icon-google-plus"></i>
                <i class="am-icon-pinterest"></i>
                <i class="am-icon-instagram"></i>
                <i class="am-icon-linkedin"></i>
                <i class="am-icon-youtube-play"></i>
                <i class="am-icon-rss"></i>
                  {% if request.session.s_name_001 %}
                {{ request.session.s_name_001 }},您好！<a href="/post">发布</a> <a href="/logout">注销</a>
                  {% else %}
                 <a href="/login">登录</a>
                <a href="/register">注册</a>
                  {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--topbar end-->

      <div class="header-box" data-am-sticky>
        <!--header start-->
          <div class="container">
            <div class="header">
              <div class="am-g">
                <div class="am-u-lg-2 am-u-sm-12">
                  <div class="logo">
                    <a href=""><img src="{% static 'assets/images/logo.png' %}" alt="" /></a>
                  </div>
                </div>
                <div class="am-u-md-10">
                  <div class="header-right am-fr">
                    <div class="header-contact">
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-phone"></i>
  												<strong>1234567890</strong>
  												<span>周一~周五, 0:00 - 24:00</span>
  											</div>
  										</div>
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-envelope-o"></i>
  												<strong>info@ist.com</strong>
  												<span>随时欢迎您的来信！</span>
  											</div>
  										</div>
                      <div class="header_contacts--item">
  											<div class="contact_mini">
  												<i style="color:#7c6aa6" class="contact-icon am-icon-map-marker"></i>
  												<strong>人妖胡同,</strong>
  												<span>巴洛特利大街22</span>
  											</div>
  										</div>
                    </div>
                    <a href="404-light.html" class="contact-btn">
                      <button type="button" class="am-btn am-btn-secondary am-radius">联系我们</button>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!--header end-->


        <!--nav start-->
        <div class="nav-contain">
          <div class="nav-inner">
            <ul class="am-nav am-nav-pills am-nav-justify">
              <li class=""><a href="#">首页</a></li>
              <li>
                <a href="#">我是菜单1</a>
                <!-- sub-menu start-->
                <ul class="sub-menu">
									<li class="menu-item"><a href="#">我是菜单1_1</a></li>
									<li class="menu-item"><a href="#">我是菜单1_2</a></li>
									<li class="menu-item"><a href="#">我是菜单1_3</a></li>
								</ul>
                <!-- sub-menu end-->
              </li>
              <li><a href="#">我是菜单2</a></li>
              <li><a href="#">我是菜单3</a></li>
              <li>
                <a href="#">我是菜单4</a>
                <!-- sub-menu start-->
                <ul class="sub-menu">
									<li class="menu-item"><a href="#">我是菜单4_1</a></li>
									<li class="menu-item"><a href="#">我是菜单4_2</a></li>
									<li class="menu-item"><a href="#">我是菜单4_3</a></li>
								</ul>
                <!-- sub-menu end-->
              </li>
              <li><a href="#">我是菜单5</a></li>
              <li><a href="#">我是菜单6</a></li>
              <li><a href="#">我是菜单7</a></li>
            </ul>
          </div>
        </div>
        <!--nav end-->
      </div>

    </div>
    <!--mobile header start-->
    <div class="m-header">
      <div class="am-g am-show-sm-only">
        <div class="am-u-sm-2">
          <div class="menu-bars">
            <a href="#doc-oc-demo1" data-am-offcanvas="{effect: 'push'}"><i class="am-menu-toggle-icon am-icon-bars"></i></a>
            <!-- 侧边栏内容 -->
            <nav data-am-widget="menu" class="am-menu  am-menu-offcanvas1" data-am-menu-offcanvas >
              <a href="javascript: void(0)" class="am-menu-toggle"></a>

              <div class="am-offcanvas" >
                <div class="am-offcanvas-bar">
                  <ul class="am-menu-nav am-avg-sm-1">
                    <li><a href="#" class="" >首页</a></li>
                    <li class="am-parent">
                      <a href="#" class="" >我是菜单1</a>
                      <ul class="am-menu-sub am-collapse ">
                        <li class="">
                          <a href="#" class="" >我是菜单1_1</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单1_2</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单1_3</a>
                        </li>
                      </ul>
                    </li>
                    <li class=""><a href="#" class="" >我是菜单2</a></li>
                    <li class=""><a href="#" class="" >我是菜单3</a></li>
                    <li class="am-parent">
                      <a href="#" class="" >我是菜单4</a>
                      <ul class="am-menu-sub am-collapse  ">
                        <li class="">
                          <a href="#" class="" >我是菜单4_1</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单4_2</a>
                        </li>
                        <li class="">
                          <a href="#" class="" >我是菜单4_3</a>
                        </li>
                      </ul>
                    </li>
                    <li class=""><a href="#" class="" >我是菜单5</a></li>
                    <li class=""><a href="#" class="" >我是菜单6</a></li>
                    <li class=""><a href="#" class="" >我是菜单7</a></li>
                    <li class="am-parent">
                      <a href="#" class="nav-icon nav-icon-globe" >Language</a>
                      <ul class="am-menu-sub am-collapse  ">
                        <li>
                          <a href="#" >English</a>
                        </li>
                        <li class="">
                          <a href="#" >中文</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-share-contain">
                      <div class="nav-share-links">
                        <i class="am-icon-facebook"></i>
                        <i class="am-icon-twitter"></i>
                        <i class="am-icon-google-plus"></i>
                        <i class="am-icon-pinterest"></i>
                        <i class="am-icon-instagram"></i>
                        <i class="am-icon-linkedin"></i>
                        <i class="am-icon-youtube-play"></i>
                        <i class="am-icon-rss"></i>
                      </div>
                    </li>
                    <li class=""><a href="/login" class="" >登录</a></li>
                    <li class=""><a href="/register" class="" >注册</a></li>
                  </ul>

                </div>
              </div>
            </nav>

          </div>
        </div>
        <div class="am-u-sm-5 am-u-end">
          <div class="m-logo">
            <a href=""><img src="{% static 'assets/images/logo.png' %}" alt=""></a>
          </div>
        </div>
      </div>
      <!--mobile header end-->
    </div>

    <!--===========layout-container================-->
    <div class="layout-container">
      <div class="page-header">
        <div class="am-container">
          <h1 class="page-header-title">Hello,Python Web</h1>
        </div>
      </div>

      <div class="breadcrumb-box">
        <div class="am-container">
          <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li class="am-active">新闻列表</li>
          </ol>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="container">
        <div class="section--header">
					<h2 class="section--title">Latest News</h2>

				</div>

        <div class="news-contaier">
          <div class="blog">
            <div class="am-g">
{% for item in articles %}
              <div class="am-u-lg-4 am-u-md-6  am-u-end">
                <div class="article">
                  <div class="article-img">
                    <img src="/static/images/{{ item.image }}" alt="" />
                  </div>
                  <div class="article-header">
                    <h2><a href="/article/{{ item.id }}" rel="">{{ item.title }}</a></h2>
                    <ul class="article--meta">
											<li class="article--meta_item -date">{{ item.publish_date }}</li>
											<li class="article--meta_item comments">33 Comments</li>
										</ul>
                  </div>
                  <div class="article--content">
										<p>{{ item.content }}</p>
									</div>
                  <div class="article--footer">
  									<a href="/article/{{ item.id }}" class="link">Read More</a>
  								</div>
                </div>
              </div>
                {% endfor %}
            </div>
            <!-- pagination-->
            <ul class="am-pagination">
                {% if articles.has_previous %}
                <li><a href="?page={{ articles.previous_page_number }}">&laquo;</a></li>
                {% else %}
              <li class="am-disabled"><a href="#">&laquo;</a></li>
                {% endif %}
            {% for page_num in articles.paginator.page_range %}
                {% if page_num == articles.number %}
                    <li class="am-active"><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                {% else %}
                    <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                {% endif %}
            {% endfor %}
            {% if articles.has_next %}
                    <li><a href="?page={{ articles.next_page_number }}">&raquo;</a></li>
                 {% else %}
                <li class="am-disabled"><a href="#">&raquo;</a></li>
            {% endif %}

            </ul>
          </div>

        </div>
      </div>
    </div>
    <!--===========layout-footer================-->
    <div class="layout-footer">
      <div class="footer">
        <div style="background-color:#383d61" class="footer--bg"></div>
        <div class="footer--inner">
          <div class="container">
            <div class="footer_main">
              <div class="am-g">
                <div class="am-u-md-3 ">
                  <div class="footer_main--column">
                    <strong class="footer_main--column_title">我是页脚1</strong>
                    <div class="footer_about">
												</div>
                  </div>
                </div>

                <div class="am-u-md-3 ">
                  <div class="footer_main--column">
										<strong class="footer_main--column_title">我是页脚2</strong>

									</div>
                </div>

                <div class="am-u-md-3 ">
                  <div class="footer_main--column">
										<strong class="footer_main--column_title">我是页脚3</strong>

									</div>
                </div>

                <div class="am-u-md-3 ">
                  <div class="footer_main--column">
										<strong class="footer_main--column_title">我是页脚4</strong>

									</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="{% static 'assets/js/jquery-2.1.0.js' %}" charset="utf-8"></script>
  <script src="{% static 'assets/js/amazeui.js' %}" charset="utf-8"></script>
</body>
</html>
